<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card>
        <!--
          默认遵循的是浮动布局, 可以改成flex布局
          el-row: 一行, type: flex, justify: 设置主轴的对齐方式
          el-col: 一列, span="比例"
        -->
        <!-- 一行 -->
        <el-row style="margin: 10px 0;">
          <el-col :span="24" style="background-color: red;">24</el-col>
        </el-row>
        <!-- 一行 -->
        <el-row style="margin: 10px 0;">
          <el-col :span="12" style="background-color: red;">12</el-col>
          <el-col :span="12" style="background-color: green;">12</el-col>
        </el-row>
        <!-- 一行 -->
        <el-row style="margin: 10px 0;">
          <el-col :span="8" style="background-color: red;">8</el-col>
          <el-col :span="8" style="background-color: green;">8</el-col>
          <el-col :span="12" style="background-color: purple;">12</el-col>
        </el-row>

        <!-- 一行 -->
        <el-row style="margin: 10px 0;" type="flex" justify="end">
          <el-col :span="8" style="background-color: red;">8</el-col>
          <el-col :span="8" style="background-color: green;">8</el-col>
          <el-col :span="3" style="background-color: purple;">3</el-col>
        </el-row>

      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Departments'
}
</script>

<style>

</style>
